<template>
  <NewCard title="申请开票">
   
    <div class="form_main">
      <h3>发票详情</h3>
      <el-form
        ref="ruleForm"
        :rules="invRules"
        :model="invoiceDetails"
        label-width="120px"
        label-position="left"
        class="invoiceDetails"
        :validate-on-rule-change="false"
      >
        <el-form-item label="发票类型" prop="type">
          <el-radio-group v-model="invoiceDetails.type" @change="changeType">
            <el-radio label="1">增值税普通发票</el-radio>
            <el-radio label="2">增值税专用发票</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="抬头类型" prop="titleType">
          <el-radio-group v-model="invoiceDetails.titleType">
            <el-radio label="1" v-if="invoiceDetails.type == '1'"
              >个人</el-radio
            >
            <el-radio label="2">企业</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发票抬头" prop="invoiceTitle">
          <el-input
            v-model="invoiceDetails.invoiceTitle"
            placeholder="请输入发票抬头"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业税号" prop="dutyNum">
          <el-input
            v-model="invoiceDetails.dutyNum"
            placeholder="请输入税号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model.number="invoiceDetails.phone"
            placeholder="请输入注册手机号"
            @blur="topblurRul"
          ></el-input>
        </el-form-item>
        <el-form-item label="注册地址" prop="address">
          <el-input
            v-model="invoiceDetails.address"
            placeholder="请输入注册地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="openBank">
          <el-input
            v-model="invoiceDetails.openBank"
            placeholder="请输入开户银行"
          ></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="bankAccount">
          <el-input
            maxlength="19"
            v-model="invoiceDetails.bankAccount"
            placeholder="请输入银行账号"
            @blur="plakrule"
          ></el-input>
        </el-form-item>
        <el-form-item label="发票金额">
          <p>￥{{ getAllMoney | sumFilters }}</p>
        </el-form-item>
      </el-form>
      <h3>收件人信息</h3>
      <el-form
        ref="ruleFormilst"
        :rules="recRules"
        :model="recipients"
        label-width="120px"
        label-position="left"
        class="recipients"
      >
        <!-- <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="recipients.email"
            placeholder="请填写接收发票的邮箱"
            @blur="blurRul"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="收件人" prop="name">
          <el-input
            v-model="recipients.name"
            placeholder="请填写收件人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="recipients.phone"
            placeholder="请填写收件人手机号"
            @blur="blurRul"
          ></el-input>
        </el-form-item>
        <el-form-item label="收件地址" prop="area">
          <el-cascader
            size="large"
            :options="options"
            v-model="recipients.area"
            placeholder="省 / 市 / 区"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="recipients.address"
            placeholder="请填写详细地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="subBtn">
        <el-button round @click="resetForm('ruleForm', 'ruleFormilst')"
          >取消</el-button
        >
        <el-button
          round
          class="accomplish"
          @click="submitForm('ruleForm', 'ruleFormilst')"
          >完成</el-button
        >
      </div>
    </div>
  </NewCard>
</template>

<script>
import { addtinvoicegetInfolist } from "../../../../BMViews/api/aboutInvoice/aboutInvoice.js";

//引入省市区数据的插件
import { regionData, CodeToText } from "element-china-area-data";
import NewCard from "@/wss/components/newCard.vue";
export default {
  name: "ApplyFor",
  props: ["invChecked", "getAllMoney"],
  components: { NewCard },
  data() {
    return {
      //发票详情数据
      invoiceDetails: {
        type: "1",
        titleType: "1",
        invoiceTitle: "",
        dutyNum: "",
        phone: "",
        address: "",
        openBank: "",
        bankAccount: "",
        sum: "1000",
      },
      allid: [],
      //发票详情表单验证
      invRules: {
        type: [{ required: true, message: "请选择发票类型", trigger: "blur" }],
        titleType: [
          { required: true, message: "请选择抬头类型", trigger: "blur" },
        ],
        invoiceTitle: [
          { required: true, message: "请输入发票抬头", trigger: "blur" },
        ],
        dutyNum: [
          { required: true, message: "请输入企业税号", trigger: "blur" },
        ],
      },
      //收件人信息
      recipients: {
        // email: "",
        name: "",
        phone: "",
        area: [],
        address: "",
      },
      //省市区的数据
      options: regionData,
      //选择的省市区
      selectedOptions: [],
      //收件人信息的表单验证
      recRules: {
        // email: [
        //   { required: true, message: "请填写接收发票的邮箱", trigger: "blur" },
        // ],
        name: [
          { required: true, message: "请填写收件人姓名", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请填写收件人手机号", trigger: "blur" },
        ],
        area: [
          { required: true, message: "请选择收件地址", trigger: "change" },
        ],
        address: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    // this.$bus.$off(["invChecked"]);
    this.$bus.$on("invChecked", (item) => {
      console.log(item, "item");
      this.allid = item;
    });
  },
  methods: {
    async addtinvoicegetInfolist() {
      this.invoiceDetails = {
        depositArray: this.allid,
        type: this.invoiceDetails.type, //发票类型
        titleType: this.invoiceDetails.titleType, //抬头类型
        title: this.invoiceDetails.invoiceTitle, // 发票抬头
        sh: this.invoiceDetails.dutyNum, // 企业税号

        phone: this.invoiceDetails.phone, //手机号
        zcdz: this.invoiceDetails.address, //注册地址
        khyh: this.invoiceDetails.openBank, //开户银行
        yhzh: this.invoiceDetails.bankAccount, //银行账号
        amount: this.getAllMoney, //发票金额

        // email: this.recipients.email, //邮寄邮箱
        sjr: this.recipients.name, //收件人
        tel: this.recipients.phone, //手机号

        cityCode: this.recipients.area[this.recipients.area.length - 1], //收货地址
        address: this.recipients.address, //收货地址
      };

      let { code } = await addtinvoicegetInfolist(this.invoiceDetails);
      if (code == 200) {
        this.$message({
          showClose: true,
          message: "开票成功",
          type: "success",
        });
        this.$emit("updateDate");
        this.invoiceDetails = {
          type: "",
          titleType: "",
          invoiceTitle: "",
          dutyNum: "",
          phone: "",
          address: "",
          openBank: "",
          bankAccount: "",
          sum: "1000",
        };
        this.recipients = {
          // email: "",
          name: "",
          phone: "",
          area: [],
          address: "",
        };
      }
    },

    // 点击增值税专用发票的时候
    changeType() {
      if (this.invoiceDetails.type == "2") {
        this.invoiceDetails.titleType = "2";

        // 添加专用发票的验证规则
        let rul = {
          phone: [
            { required: true, message: "请输入注册手机号", trigger: "blur" },
          ],
          address: [
            { required: true, message: "请输入注册地址", trigger: "blur" },
          ],
          openBank: [
            { required: true, message: "请输入开户银行", trigger: "blur" },
          ],
          bankAccount: [
            { required: true, message: "请输入银行账号", trigger: "blur" },
          ],
        };
        let rules = Object.assign(this.invRules, rul);
        this.$set(this.invRules, rules); //添加响应式数据
      } else {
        //还原普通发票的验证规则
        this.invRules = {
          type: [
            { required: true, message: "请选择发票类型", trigger: "blur" },
          ],
          titleType: [
            { required: true, message: "请选择抬头类型", trigger: "blur" },
          ],
          invoiceTitle: [
            { required: true, message: "请输入发票抬头", trigger: "blur" },
          ],
          dutyNum: [
            { required: true, message: "请输入企业税号", trigger: "blur" },
          ],
        };
      }
    },

    //选择省市区的回调
    handleChange() {
      for (let i = 0; i < this.recipients.area.length; i++) {
        CodeToText[this.recipients.area[i]];
      }
    },

    async submitForm(formName) {
      try {
        await this.$refs.ruleForm.validate();
        await this.$refs.ruleFormilst.validate();
        // 正则验证
        await this.blurRul();

        await this.addtinvoicegetInfolist(); //添加
        this.$bus.$emit("refreshData"); // 刷新未开票数据
      } catch (error) {
        try {
          await this.$refs.ruleForm.validate();
          await this.$refs.ruleFormilst.validate();
        } catch (error) {}
      }
      this.$emit("chanceStatus");
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.invoiceDetails.address = "";
      (this.invoiceDetails.openBank = ""),
        (this.invoiceDetails.bankAccount = ""),
        (this.invoiceDetails.sum = ""),
        this.$refs.ruleFormilst.resetFields();
    },

    // 正则验证
    topblurRul(){
      if (
          !/^1(3|4|5|7|8)\d{9}$/.test(this.invoiceDetails.phone)
      ) {
        console.log("diudiudiu");
        this.$message({ message: "请输入正确的手机号！", type: "warning" });
        return Promise.reject();
      }
    
    },
    plakrule(){
          //  使用正则表达式进行验证银行卡
      if (!/^([1-9]{1})(\d{14}|\d{18})$/.test(this.invoiceDetails.bankAccount)
      ) {
        this.$message({ message: "请输入正确的银行卡号！", type: "warning" });
        return Promise.reject();
      }
    },
    blurRul() {
      //使用正则表达式进行验证手机号码
    
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.recipients.phone)) {
        this.$message({ message: "请输入正确的手机号！", type: "warning" });
        return Promise.reject();
        
      }
   
      //使用正则表达式进行验证邮箱
      // let reg =
      //   /^[A-Za-z0-9_\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      // if (!reg.test(this.recipients.email)) {
      //   this.$message({ message: "请输入正确的邮箱！", type: "warning" });
      //   return Promise.reject();
      // }
    },
  },
};
</script>

<style scoped>
/* 表单 */
.form_main {
  padding: 20px 30px;
}
.form_main h3 {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  margin: 0;
  margin-bottom: 30px;
}
.form_main p {
  margin: 0;
}

::v-deep .el-form-item--medium .el-form-item__label {
  font-weight: 400;
}
.invoiceDetails {
  border-bottom: 1px solid #efefef;
  margin-bottom: 40px;
  padding-bottom: 20px;
}

/* 单选框样式 */
::v-deep .el-radio .el-radio__inner {
  width: 20px;
  height: 20px;
  border-color: #bbbbbb;
  background: #fff;
}
::v-deep .el-radio .is-disabled .el-radio__inner {
  background: #f2f2f2;
}
::v-deep .el-radio .is-checked .el-radio__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-radio.is-checked .el-radio__label {
  color: #333;
}
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 5px;
  left: 4px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
/* 级联选择器 */
.form_main .el-cascader {
  width: 100%;
}
::v-deep .form_main .el-cascader input {
  width: 100%;
}

.recipients {
  margin-bottom: 80px;
}
/* 按钮 */
.subBtn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  display: flex;
  justify-content: flex-end;
  padding: 20px 30px;
}
.subBtn .el-button {
  padding: 10px 40px;
  /* font-weight: bold; */
}
.subBtn .accomplish {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
.subBtn .el-button:hover {
  background-color: #fff;
  border-color: #bbb;
  color: #333;
}
.subBtn .accomplish:hover {
  opacity: 0.9;
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
</style>